<template>
  <el-dialog
    :title="$t('编辑物流')"
    destroy-on-close
    append-to-body
    :visible.sync="show"
    width="90%"
    :before-close="cancel"
  >
    <el-table ref="TableRef" :data="tableData" v-loading="loading">
      <el-table-column show-overflow-tooltip align="center" type="index" width="80">
        <template #default="{ $index }">
          <!-- 头程 中程 尾程 -->
          <div style="font-weight: bold; font-size: 15px">
            <div v-if="$index == 0">{{ $t('头程') }}</div>
            <div v-if="$index == 1">{{ $t('中程') }}</div>
            <div v-if="$index == 2">{{ $t('尾程') }}</div>
          </div>
        </template>
      </el-table-column>
      <!-- 快递公司 单号 重量(kg) 总价格 平均单价 是否收货 操作 收货人 收货时间 -->
      <el-table-column show-overflow-tooltip :label="$t('快递公司')" align="center" prop="createTime" width="200">
        <template #default="{ row }">
          <el-select clearable size="mini" style="width: 100%" v-model="row.expressCompany" :placeholder="$t('请选择')">
            <el-option
              v-for="item in row.expressCompanyList"
              :key="item.id"
              :label="item.expressName"
              :value="item.id"
            />
          </el-select>
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip :label="$t('单号')" align="center" prop="expressNo" width="150">
        <template #default="{ row }">
          <el-input size="mini" style="width: 100%" v-model="row.expressNo" />
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip :label="$t('重量(kg)')" align="center" prop="weight" width="150">
        <template #default="{ row }">
          <el-input-number
            size="mini"
            style="width: 100%"
            :precision="2"
            v-model="row.weight"
            controls-position="right"
            :min="0"
          />
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip :label="$t('总价格')" align="center" prop="price" width="150">
        <template #default="{ row }">
          <el-input-number
            size="mini"
            style="width: 100%"
            :precision="0"
            v-model="row.price"
            controls-position="right"
            :min="0"
          />
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip :label="$t('平均单价')" align="center" prop="unitPrice">
        <template #default="{ row }">
          {{ row.unitPrice ? (+row.unitPrice).toFixed(2) : '' }}
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip :label="$t('操作')" align="center">
        <template #default="{ row, $index }">
          <el-button @click="handleEdit(row, $index)" type="text">
            {{ $t('修改') }}
          </el-button>
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip :label="$t('是否收货')" align="center" prop="createTime">
        <template #default="{ row, $index }">
          <!-- 是否收货 0-否 1-是 -->
          <div v-if="row.receive == 0" style="color: #409eff; cursor: pointer" @click="handleReceive(row, $index)">
            {{ $t('未收货') }}
          </div>
          <div v-if="row.receive == 1" style="color: green">{{ $t('已收货') }}</div>
        </template>
      </el-table-column>

      <el-table-column show-overflow-tooltip :label="$t('收货人')" align="center" prop="opsUser" />
      <el-table-column show-overflow-tooltip :label="$t('收货时间')" align="center" prop="opsTime" />
    </el-table>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">
        {{ $t('关闭') }}
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import {
  getBatchExpressListById,
  expressCompanyListNoPage,
  updateHeadPath2,
  updateHeadPath1,
  updateCentrePath2,
  updateCentrePath1,
  updateTailPath2,
  updateTailPath1,
} from '@/api/purchasingManage/batch'
export default {
  props: {
    /**
     * formData
     */
    formData: {
      type: Object,
      default: () => ({}),
    },

    /**
     * 控制显示隐藏
     */
    show: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      loading: false,
      // 类型 1-头程 2-中程 3-尾程
      expressCompanyList1: [],
      expressCompanyList2: [],
      expressCompanyList3: [],
      tableData: [],
    }
  },
  computed: {},
  watch: {
    show: function (newValue) {
      if (newValue) {
        this.getExpressList()
      }
    },
  },
  methods: {
    async getExpressList() {
      this.loading = true
      // <!-- 头程 中程 尾程 -->
      await expressCompanyListNoPage({ type: 1 }).then((res) => {
        this.expressCompanyList1 = res.data
      })
      await expressCompanyListNoPage({ type: 2 }).then((res) => {
        this.expressCompanyList2 = res.data
      })
      await expressCompanyListNoPage({ type: 3 }).then((res) => {
        this.expressCompanyList3 = res.data
      })

      this.getList()
    },
    getList() {
      getBatchExpressListById({ id: this.formData.id })
        .then((res) => {
          const { data } = res

          const header = data[0],
            centre = data[1],
            tail = data[2]

          this.tableData = [
            {
              expressCompanyList: this.expressCompanyList1,
              expressCompany: header.headPathExpress,
              expressNo: header.headPathExpressNo,
              weight: header.headPathWeight,
              price: header.headPathPrice,
              unitPrice: +header.headPathPrice / +header.headPathWeight,
              receive: header.headPathReceive,
              opsUser: header.headPathOpsUserName,
              opsTime: header.headPathOpsTime,
            },
            {
              expressCompanyList: this.expressCompanyList2,
              expressCompany: centre.centrePathExpress,
              expressNo: centre.centrePathExpressNo,
              weight: centre.centrePathWeight,
              price: centre.centrePathPrice,
              unitPrice: +centre.centrePathPrice / +centre.centrePathWeight,
              receive: centre.centrePathReceive,
              opsUser: centre.centrePathOpsUserName,
              opsTime: centre.centrePathOpsTime,
            },
            {
              expressCompanyList: this.expressCompanyList3,
              expressCompany: tail.tailPathExpress,
              expressNo: tail.tailPathExpressNo,
              weight: tail.tailPathWeight,
              price: tail.tailPathPrice,
              unitPrice: +tail.tailPathPrice / +tail.tailPathWeight,
              receive: tail.tailPathReceive,
              opsUser: tail.tailPathOpsUserName,
              opsTime: tail.tailPathOpsTime,
            },
          ]
        })
        .finally(() => (this.loading = false))
    },
    handleReceive(row, $index) {
      // <!-- 头程 中程 尾程 -->
      let str = $index == 0 ? '头程' : $index == 1 ? '中程' : '尾程'
      this.$confirm(this.$t(`${str}确认签收?`), this.$t('提示'), {
        type: 'warning',
      })
        .then(() => {
          const id = this.formData.id
          // <!-- 头程 中程 尾程 -->
          if ($index == 0) {
            const data = {
              id,
              headPathReceive: 1,
            }
            updateHeadPath1(data).then((res) => {
              this.$message({ type: 'success', message: res.msg })
              this.getList()
            })
          }
          if ($index == 1) {
            const data = {
              id,
              centrePathReceive: 1,
            }
            updateCentrePath1(data).then((res) => {
              this.$message({ type: 'success', message: res.msg })
              this.getList()
            })
          }
          if ($index == 2) {
            const data = {
              id,
              tailPathReceive: 1,
            }
            updateTailPath1(data).then((res) => {
              this.$message({ type: 'success', message: res.msg })
              this.getList()
            })
          }
        })
        .catch((e) => e)
    },
    handleEdit(row, $index) {
      this.$confirm(this.$t('确认修改?'), this.$t('提示'), {
        type: 'warning',
      })
        .then(() => {
          const { expressCompany, expressNo, weight, price, receive } = row
          const id = this.formData.id
          // <!-- 头程 中程 尾程 -->
          if ($index == 0) {
            const data = {
              id,
              headPathExpress: expressCompany,
              headPathExpressNo: expressNo,
              headPathWeight: weight,
              headPathPrice: price,
              headPathReceive: receive,
            }
            updateHeadPath2(data).then((res) => {
              this.$message({ type: 'success', message: res.msg })
              this.getList()
            })
          }
          if ($index == 1) {
            const data = {
              id,
              centrePathExpress: expressCompany,
              centrePathExpressNo: expressNo,
              centrePathWeight: weight,
              centrePathPrice: price,
              centrePathReceive: receive,
            }
            updateCentrePath2(data).then((res) => {
              this.$message({ type: 'success', message: res.msg })
              this.getList()
            })
          }
          if ($index == 2) {
            const data = {
              id,
              tailPathExpress: expressCompany,
              tailPathExpressNo: expressNo,
              tailPathWeight: weight,
              tailPathPrice: price,
              tailPathReceive: receive,
            }
            updateTailPath2(data).then((res) => {
              this.$message({ type: 'success', message: res.msg })
              this.getList()
            })
          }
        })
        .catch((e) => e)
    },
    cancel() {
      this.$emit('getList')
      this.$emit('update:show', false)
    },
  },
}
</script>
<style scoped lang="scss"></style>
